<!DOCTYPE html>
<html>
<head>
  <title>{{ title }}</title>
  <meta charset="UTF-8">
  <script src="https://cdn.hypatiasoftware.org/syllabus/highlight.min.js">
  </script>
  <link href="https://cdn.hypatiasoftware.org/syllabus/default.min.css" rel="stylesheet"/>
  <style>
   /*! Typebase.less v0.1.0 | MIT License */
  /* Setup */
  html {
    /* Change default typefaces here */
    font-family: serif;
    font-size: 137.5%;
    -webkit-font-smoothing: antialiased;
  }
  /* Copy & Lists */
  p {
    line-height: 1.5rem;
    margin-top: 1.5rem;
    margin-bottom: 0;
  }
  ul,
  ol {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
  ul li,
  ol li {
    line-height: 1.5rem;
  }
  ul ul,
  ol ul,
  ul ol,
  ol ol {
    margin-top: 0;
    margin-bottom: 0;
  }
  blockquote {
    line-height: 1.5rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
  /* Headings */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    /* Change heading typefaces here */
    font-family: sans-serif;
    margin-top: 1.5rem;
    margin-bottom: 0;
    line-height: 1.5rem;
  }
  h1 {
    font-size: 4.242rem;
    line-height: 4.5rem;
    margin-top: 3rem;
  }
  h2 {
    font-size: 2.828rem;
    line-height: 3rem;
    margin-top: 3rem;
  }
  h3 {
    font-size: 1.414rem;
  }
  h4 {
    font-size: 0.707rem;
  }
  h5 {
    font-size: 0.4713333333333333rem;
  }
  h6 {
    font-size: 0.3535rem;
  }
  /* Tables */
  table {
    margin-top: 1.5rem;
    border-spacing: 0px;
    border-collapse: collapse;
  }
  table td,
  table th {
    padding: 0;
    line-height: 33px;
  }
  /* Code blocks */
  code {
    vertical-align: bottom;
  }
  /* Leading paragraph text */
  .lead {
    font-size: 1.414rem;
  }
  /* Hug the block above you */
  .hug {
    margin-top: 0;
  }

  /*
   * AdventureDoc specific stuff
   *
   * Colors:
   *   - Med Tan: #e6e2af
   *   - Dark Tan: #a7a37e
   *   - Light Tan: #efecca
   *   - Med Blue: #046380
   *   - Dark Teal: #002f2f
   */

  body {
    color: #333;
    background-color: #fff;
    perspective: 600;
  }

  a,
  a:link {
    color: #046380;
  }

  a:visited {
    color: #002f2f;
  }

  .jumpto {
    font-weight: bold;

  }

  .jumpto p {
    font-weight: bold;
  }

  .jumpto ul {
    list-style: none;
  }

  .jumpto li:before,
  .next:before {
    content: "\0021AA ";
    color: #a7a37e;
  }

  .next:visited,
  .next {
    display: block;
    margin: 2.25rem 0 0.75rem 0;
    font-size: 1.5rem;
  }

  .next:hover {
    background-color: #fff;
  }

  progress {
    width: 100%;
    margin-bottom: 1.5rem;
    opacity: 0.5;
  }

  section {
    box-sizing: border-box;
    background: #fff;
    padding: 3rem;
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    margin: 0 auto;
    overflow-y: scroll;
  }

  section + section {
    visibility: hidden;
    opacity: 0;
    transition: all 0.5s;
  }

  section:target {
    visibility: visible;
    opacity: 1;
    transform-style: preserve-3d;
    animation: flip 0.5s;
  }

  @keyframes flip {
    from { transform: rotateY(180deg); }
    to { transform: rotateY(0deg); }
  }

  pre code {
    margin: 1.5rem 0;
    background #e5e5e5;
    border: 1px dashed #a7a37e;
  }

  progress[value] {
    /* Reset the default appearance */
    -webkit-appearance: none;
    appearance: none;
    height: 3rem;
  }

  progress[value]::-webkit-progress-bar {
    background-color: #efecca;
    border: 2px solid #111;
    border-radius: 4px;
  }

  progress[value]::-webkit-progress-value {
    background-color: #a7a373;
    border-right: 20px solid #002F2F;

    background-image: repeating-linear-gradient(45deg, transparent, transparent 35px,
      rgba(255,255,255,.5) 35px,
      rgba(255,255,255,.5) 70px);
  }
  </style>
</head>
<body>
  {% for section in sections %}
  <section id="{{ section.name }}">
    {{ section.contents }}
  </section>
  {% endfor %}
  <script>
   hljs.initHighlightingOnLoad();
  </script>
</body>
</html>
